<template>
    <div class="search">
        <div class="back">
            <el-button @click="ToBack">返回</el-button>
        </div>

        <div class="search_box">
            <div class="search_item" v-for="(item, index) in searchList" @click="toDetail(item)">
                <div class="bt"></div>
                <img :src="item.img" alt="">
                <p>{{ item.name }}</p>
                <p>{{ item.productDescription }}</p>
                <p style="color: red;">￥{{ item.price }}</p>
                <!-- <el-button class="button">加入购物车</el-button>
                 -->
                <!-- <div class="button">
                    <el-button round class="button1">立即购买</el-button>
                    <el-button round class="button2" @click="AddCart">加入购物车</el-button>
                </div> -->
               
            </div>
        </div>

    </div>
</template>

<script>
import { search } from '@/api/commodity';
export default ({
    data() {
        return {
            searchList: [],
            userId: 0
        }
    },
    created() {
        this.getSearch()
        this.getUserId()
    },

    methods: {
        getSearch() {
            var word = this.$route.query.word
            search(word).then(res => {
                this.searchList = res.data
                console.log(res)
            })
        },

        ToBack() {
            this.$router.go(-1)
        },

        toDetail(item) {
            this.$router.push({
                query: {
                    id: item.commodityId,
                    img: item.img,
                    name: item.name,
                    price: item.price,
                    productDescription: item.productDescription,
                    userId: this.userId
                },
                path: '/detail'
            })

        },

        AddCart() {

        },

        getUserId() {
            var result = localStorage.getItem("user")
            var res = JSON.parse(result)
            this.userId = res.id
        }
    }
})
</script>

<style scoped>
.back {
    width: 68px;
    height: 40px;
    left: 0;
}

.search_box {
    display: flex;
    /* position: relative; */
    width: 1200px;
    margin: 50px auto;

}

.search_item {
    position: relative;
    width: 240px;
    height: 360px;
    margin: 10px 10px;


}

.search_item:hover {
    box-shadow: 0 -2px #dedada, 2px 0 #dedada,  0 2px #dedada, -2px 0 #dedada;
    cursor: pointer;
    
}

.search_item img {
    width: 220px;
    height: 200px;
    margin-top: 10px;
}

.search_item p {
    text-align: left;
    margin: 10px 20px;
    font-size: 14px;
}

.button {
    position: absolute;
    bottom: 15px;
    left: 7px;
}

.button .button2 {
    color: #d35555;
}

.search_item .bt {
  width: 0px;
  height: 2px;
  bottom: 0;
  left: 0;
  background: linear-gradient(103.89deg, #41e9ca -31.48%, #25bb68 53.11%, #beec3d 128.5%);
  position: absolute;
  transition: .3s;

}
.search_item:hover p {
  color: #00c65d;
}

.search_item:hover .bt {
  width: 100%;
  height: 2px;
}
</style>